<template>
  <div class="niceGoods">
    <mynavbar></mynavbar>
    <div class="poster">
        <img src="https://yanxuan.nosdn.127.net/static-union/16478455118353b1.jpg?imageView" alt="">
        <img src="https://yanxuan.nosdn.127.net/static-union/16478455110a23a0.jpg?imageView" alt="">
        <img src="https://yanxuan.nosdn.127.net/static-union/164784551137b31e.jpg?imageView" alt="">
    </div>

    <div class="niceGoods-bottom">
        <!-- 榜单分类 -->
        <div class="bangdan">
            <div class="box" v-for="(v,index) in bangdanArr" :key="index">
                <div class="text">
                    <div>
                        <h4>{{ v.title }}</h4>
                        <p>{{ v.msg }}</p>
                    </div>
                    <p><van-tag color="#cbb693" text-color="">立即前往</van-tag></p>
                </div>
                <img :src="v.img3" alt="" />
            </div>
        </div>
        <!-- 敬请期待 -->
        <div class="expect">
            <img src="https://yanxuan.nosdn.127.net/15746793517291594.png" alt="">   
            <p>商品筛选中，敬请期待</p>
        </div>
        <img  src=" https://yanxuan.nosdn.127.net/static-union/16478335761751d6.jpg" 
        class="hot-sale-pic">  
        <div class="expect">
            <img src="https://yanxuan.nosdn.127.net/15746793517291594.png" alt="">   
            <p>商品筛选中，敬请期待</p>
        </div>
       
        <!-- 商品列表 -->
        <div class="paihang">
            <div class="box" v-for="(v,index) in newResData" :key="index" @click="fun(v.proid)"> 
              <img :src="v.img1"/>
              <div class="text">
                  <p>{{v.proname }}</p>
                  <p> 
                      <span><i>¥</i>
                        {{ v.originprice }}</span>
                      <span><van-icon name="cart-circle-o" color="red"/></span>

                  </p>
              </div>
            </div>
        </div>
        <div class="expect">
            <img src="https://yanxuan.nosdn.127.net/15746793517291594.png" alt="">   
            <p>商品筛选中，敬请期待</p>
        </div>
        <img  src="https://yanxuan.nosdn.127.net/static-union/164783234458f774.jpg?_width=1125&_height=166">  
        <div class="paihang">
            <div class="box" v-for="(v,index) in bangdanArr" :key="index" @click="fun(v.proid)"> 
              <img :src="v.img4"/>
              <div class="text">
                  <p>{{v.proname }}</p>
                  <p> 
                      <span><i>¥</i>
                        {{ v.originprice }}</span>
                      <span><van-icon name="cart-circle-o" color="red"/></span>

                  </p>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import mynavbar from '../../yjj/item/mynavbar.vue'
import service from '../../../request/service'
export default {
    components:{
        mynavbar
    },
    data(){
        return{
            bangdanArr:[],
            newResData:[],
        }
    },
    mounted(){
        service({
            url:'api/pro/seckilllist',
            method:'get',
        }).then(res=>{
            // this.bangdanArr = res.data.data
            this.newResData = res.data.data
        })
        service({
            url:'http://localhost:3000/nicegoods',
            method:'get',
        }).then(res=>{
            this.bangdanArr = res.data
        })
    },

    methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{id:v}})
            // this.$router.push(`/infogoods/${v}`)
        }
    }
}
</script>

<style scoped>
    .poster img{
        width:100%;
    }
    .poster img:nth-child(2){
        margin: -0.1875rem 0;
    }
    .niceGoods-bottom{
        background: #fbd66c;
        padding: .625rem;
        margin-top:-0.1625rem;
    }
    /* 榜单 */
    .bangdan{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .bangdan .box{
        display:flex;
        justify-content: space-between;
        width:48%;
        background: rgb(255, 255, 255);
        margin-bottom:.3125rem;
        border-radius:.125rem;
    }
    .bangdan .box .text{
        display:flex;
        justify-content: space-around;
        flex-direction: column;
        padding-left:.625rem;
        box-sizing: border-box;
    }
    .bangdan .box .text h4{
        font-size:.75rem;
        font-weight: bold;
    }
    .bangdan .box .text p{
        font-size:.625rem;
        color:#454546;
    }
    .bangdan .box img{
        height:5rem;
    }
    .van-tag--default{
        border-radius: .625rem;
    }

    .expect{
        margin:.625rem 30%;
        font-size:.6875rem;
        color:#aaaaaa;
    }
    .expect img{
        width:8.3125rem;
    }

    /* 商品排行 */
    .paihang{
    height:100%;
    background: #fbd66c;
    column-count:3;
    column-gap:.8rem;
    box-sizing: border-box;
    }
    .paihang .box {
    break-inside: avoid;
    border-radius: .625rem;
    background-color: #fff;
    margin-bottom: .9rem;
    width: 7.1875rem;
    height:12.375rem;
    /* width: 31%; */
    }
    .paihang .box img{
    height:7.1875rem;
    width: 7.1875rem;
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    }
    .paihang  .text{
    padding: 8px;
    text-align: left;
    font-weight: bold;
     height: 32%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .paihang  .text p:first-child{
    font-size: .6875rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    }
    .paihang  .text p:last-child{
    color: #f66;
    font-size: .6875rem;
    display:flex;
    justify-content: space-between;
    
    }
    .hot-sale-pic{
        width:100%;
    }
</style>